<template>
  <div>
    <a-row>
      <a-col :span="4">
        <a-input-search
          v-model:value="value"
          placeholder="input search text"
          enter-button
          @search="onSearch"
        />
      </a-col>
      <a-col :span="2">
        <a-button type="primary" @click="add()">新增</a-button>
      </a-col>
    </a-row>

    <a-table :dataSource="dataSource" :columns="columns">
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex === 'operation'">
          <span>
            <a @click="edit(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm v-if="dataSource.length" title="确定要删除该条?" @confirm="onDelete(record.key)">
              <a>删除</a>
            </a-popconfirm>
          </span>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref } from 'vue';
import type { Ref, UnwrapRef } from 'vue';
import { cloneDeep } from 'lodash-es';
import { useRouter} from 'vue-router';
import { json } from 'stream/consumers';
export default defineComponent({
  setup() {
    const value = ref<string>("");
    const router = useRouter();
    const onSearch = (searchValue: string) => {
      console.log(searchValue, value.value);
    };
    interface DataItem {
        key: string;
        name: string;
        version: number;
        menus: string;
        remark:string
    }
    const columns = [
      {
        title: "名称",
        dataIndex: "name",
        key: "name"
      },
      {
        title: "版本",
        dataIndex: "version",
        key: "version"
      },
      {
        title: "菜单",
        dataIndex: "menus",
        key: "menus"
      },
      {
        title: "备注",
        dataIndex: "remark",
        key: "remark"
      },
      {
        title: "操作",
        dataIndex: "operation"
      }
    ];
    const dataSource : Ref<DataItem[]> = ref([
      {
        key: "1",
        name: "页面1",
        version: 1,
        menus: "菜单1",
        remark: "备注1"
      }
    ]);
    const count = computed(() => dataSource.value.length + 1);
    

    const onDelete = (key: string) => {
      dataSource.value = dataSource.value.filter(item => item.key !== key);
    };
    const edit = (record:any) => {
      router.push({
        path: '/views',
        query:{
            rowInfo: JSON.stringify(record)
        }
      })
    };
    const add = ()=>{
        router.push({
        path: '/views',
        query:{}
      })
    }

    return {
      value,
      onSearch,
      dataSource,
      columns,
      count,
      edit,
      onDelete,
      add
    };
  }
});
</script>

